<template>
  <div>
    <el-row :gutter="20">
      <el-col v-if="checkPermi(['admin:statistics:user:area'])" :xs="24" :sm="24" :md="24" :lg="18">
        <el-card :bordered="false" dis-hover class="ivu-mt">
          <div class="acea-row row-between-wrapper">
            <div class="header_title mb20">用户地域分布</div>
          </div>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="10">
              <div class="echarts">
                <div ref="myEchart" :style="{ height: '400px', width: '100%' }" />
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="14">
              <div class="tables">
                <el-table :data="resdataList" :default-sort="{ prop: 'area', order: 'descending' }" max-height="400">
                  <el-table-column
                    v-for="(item, key) in columns1"
                    :key="key"
                    :label="item.title"
                    :prop="item.key"
                    sortable
                  />
                </el-table>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col v-if="checkPermi(['admin:statistics:user:sex'])" :xs="24" :sm="24" :md="24" :lg="6">
        <el-card :bordered="false" dis-hover class="ivu-mt">
          <div class="acea-row row-between-wrapper">
            <div class="header_title mb20">用户性别比例</div>
          </div>
          <echarts-new
            v-if="optionData"
            :option-data="optionSex"
            :styles="style1"
            height="100%"
            width="100%"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts'
import '../../../../../node_modules/echarts/map/js/china.js' // 引入中国地图数据
import { userAreaData, userChannelData, userSexData } from '@/api/statistic'
import echartsNew from '@/components/echartsNew/index'
import { checkPermi } from '@/utils/permission' // 权限判断函数
export default {
  name: 'UserRegion',
  components: {
    echartsNew
  },
  props: {
    formInline: {
      type: Object,
      default: function() {
        return {
          channel_type: '',
          data: ''
        }
      }
    }
  },
  data() {
    return {
      chart: null,
      resdata: [],
      resdataList: [],
      columns1: [
        {
          title: 'TOP省份',
          key: 'area'
        },
        {
          title: '支付金额',
          key: 'payAmount',
          sortable: true
        },
        {
          title: '成交用户数量',
          key: 'payUserNum',
          sortable: true
        },
        {
          title: '累计用户数量',
          key: 'userNum',
          sortable: true
        }
      ],
      style: { height: '400px' },
      style1: { height: '400px' },
      optionData: {},
      optionSex: {}
    }
  },
  mounted() {
    this.getTrend()
    this.getSource()
    this.getSex()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    checkPermi,
    chinaConfigure() {
      const myChart = echarts.init(this.$refs.myEchart) // 这里是为了获得容器所在位置
      window.onresize = myChart.resize
      myChart.setOption({
        // 进行相关配置
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            return params.data
              ? `地区:${params.name}</br>支付金额: ${params.data.value}</br>成交用户数量: ${params.data.newNum}</br>累计用户数量: ${params.data.payPrice}`
              : `地区:${params.name}</br>支付金额: 0</br>成交用户数量: 0</br>累计用户数量: 0`
          }
        }, // 鼠标移到图里面的浮动提示框
        dataRange: {
          show: false,
          min: 0,
          max: 1000,
          text: ['High', 'Low'],
          realtime: true,
          calculable: true,
          color: ['orangered', 'yellow', 'lightskyblue']
        },
        geo: {
          // 这个是重点配置区
          map: 'china', // 表示中国地图
          roam: false,
          label: {
            normal: {
              show: false, // 是否显示对应地名
              textStyle: {
                color: 'rgba(0,0,0,0.4)'
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(0, 0, 0, 0.2)'
            },
            emphasis: {
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 10,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        series: [
          {
            type: 'scatter',
            zoom: 1.2,
            aspectScale: 1.75, // 长宽比
            coordinateSystem: 'geo' // 对应上方配置
          },
          {
            type: 'map',
            geoIndex: 0,
            data: this.resdata
          }
        ]
      })
    },
    // 统计图
    getTrend() {
      userAreaData().then((res) => {
        this.resdataList = res
        this.resdata = res.map((item) => {
          const jsonData = {}
          jsonData.name = item.area
          jsonData.value = item.payAmount
          jsonData.newNum = item.payUserNum
          jsonData.payPrice = item.userNum
          return jsonData
        })
        this.chinaConfigure()
      })
    },
    // 来源
    getSource() {
      userChannelData().then((res) => {
        let channelData = new Array()
        channelData = [
          { name: 'H5', value: 0, channel: 'h5' },
          { name: 'APP', value: 0, channel: 'ios' },
          { name: '小程序', value: 0, channel: 'routine' },
          { name: '公众号', value: 0, channel: 'wechat' }
        ]
        const channelArr = new Array()
        channelData.forEach((item) => {
          res.forEach((item1) => {
            if (item.channel == item1.channel) {
              channelArr.push({
                name: item.name,
                value: item1.num ? item1.num : 0,
                channel: item1.channel
              })
            }
          })
        })
        this.optionData = {
          tooltip: { trigger: 'item' },
          legend: {
            orient: 'vertical',
            left: 'right'
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                normal: {
                  color: function(params) {
                    // 自定义颜色
                    var colorList = ['#F8C348', '#1991FF', '#40C9D3', '#F94748', '#854FF8']
                    return colorList[params.dataIndex]
                  }
                }
              },
              labelLine: {
                show: false
              },
              data: channelArr
            }
          ]
        }
      })
    },
    getSex() {
      userSexData().then((res) => {
        let sexData = new Array()
        sexData = [
          { name: '未知', value: '', sex: '0' },
          { name: '男', value: '', sex: '1' },
          { name: '女', value: '', sex: '2' },
          { name: '保密', value: '', sex: '3' }
        ]
        const sexArr = []
        sexData.forEach((item) => {
          res.forEach((item1) => {
            if (item.sex == item1.sex) {
              sexArr.push({
                name: item.name,
                value: item1.num,
                sex: item1.sex
              })
            }
          })
        })
        this.optionSex = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'right'
          },
          series: [
            {
              name: '用户性别',
              type: 'pie',
              radius: '70%',
              itemStyle: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                normal: {
                  color: function(params) {
                    // 自定义颜色
                    var colorList = ['#1890FF', '#EF9C20', '#4BCAD5', '#854FF8', '#F94748']
                    return colorList[params.dataIndex]
                  }
                }
              },
              labelLine: {
                show: true
              },
              data: sexArr
            }
          ]
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.echarts {
  width: 100%;
}
.tables {
  width: 100%;
  ::v-deepivu-table-overflowy {
    &::-webkit-scrollbar {
      width: 0;
    }
    &::-webkit-scrollbar-track {
      background-color: transparent;
    }
    &::-webkit-scrollbar-thumb {
      background: #e8eaec;
    }
  }
}
.header_title {
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #000000;
  padding-left: 8px;
  position: relative;
  &::before {
    position: absolute;
    content: '';
    width: 2px;
    height: 18px;
    background: #1890ff;
    top: 0;
    left: 0;
  }
}
</style>
